<template>
  <div>
    <div>
      <div>产品添加</div>
      <!-- 选择产品 -->
      <div class="context">
        <el-card shadow="hover">
          <span>选择产品</span>
          <hr />
          <!-- 后续内容需要修改 -->
          <el-form :model="search" label-width="auto" style="width: 100%">
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <el-input v-model="search.productName" placeholder="请输入产品名称" style="max-width: 220px;" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button @click="initData" type="primary">搜索</el-button>
              </el-col>
              <el-col :span="2">
                <el-button @click="clear" type="primary">重置</el-button>
              </el-col>
            </el-row>
          </el-form>

          <el-table @selection-change="handleSelectionChange" :data="data" stripe style="width: 100%">
            <el-table-column label="全选" type="selection" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column type="index" label="序号" width="80" header-align="center" align="center" />
            <el-table-column prop="productNumber" label="产品编码" width="100" header-align="center" align="center" />
            <el-table-column label="产品图片" width="120" header-align="center" align="center">
              <template #default="scoped">
                <el-image v-bind:src=scoped.row.coverImage />
              </template>
            </el-table-column>

            <el-table-column prop="productName" label="产品名称" width="100" header-align="center" align="center" />
            <el-table-column prop="productDrawingNumber" label="产品图号" width="100" header-align="center"
              align="center" />
            <el-table-column prop="material" label="产品材质" width="100" header-align="center" align="center" />
            <el-table-column label="件数" width="80" header-align="center" align="center" />

            <el-table-column prop="singleWeight" label="预计重量(kg/件数)" width="80" header-align="center" align="center" />
            <el-table-column prop="price" label="单价" width="120" header-align="center" align="center" />
            <el-table-column prop="" label="产品分类" width="80" header-align="center" align="center" />
            <el-table-column prop="" label="仓库名称" width="100" header-align="center" align="center" />
          </el-table>

          <!-- 分页 -->
          <div>
            <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="chgPage" />
          </div>

        </el-card>
      </div>

      <!-- 底部 -->
      <Buttom @yes="yes" :path="path" />

    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { selectProduct } from "@/api/productApi.ts"
import { ref, onMounted } from "vue";
import Buttom from "./buttom.vue";
import { ElTable } from 'element-plus'
import Index from "@/layout/index.vue";
//路由
const router = useRouter()
const route = useRoute()

//数据初始化
onMounted(() => {
  initData();
})

// 存储当前选中的行数据
const multipleSelection = ref([])
//选中或取消时触发--向multipleSelection内部添加数据
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
};

//跳转路径
const path = "InquiryAdd"
//监听子组件,保存后,发送请求,并路由跳转
function yes() {
  router.push({ name: "InquiryAdd", query: {R :JSON.stringify(multipleSelection.value)} })
}
//数据总条数
const total = ref(0)
//页码发生变化
function chgPage(page) {
  tj.value.pageNum = page;
  initData();
}

//定义接收数据
const data = ref([])
//条件
const tj = ref({
  productName: "",
  model: "",
  productType: 0,
  pageNum: 1,
  pageSize: 5,
})
//定义查询条件
const search = ref({
  page: 1,
  pageSize: 4,
  productName: "",

})
//清空查询条件
function clear() {
  search.value = {
    page: 1,
    pageSize: 4,
    productName: "",
  }
}
//数据初始化
async function initData() {
  //进行对应的查询,并使用data来接受数据
  const res = await selectProduct(tj.value)
  console.log(res.data.data)
  data.value = res.data.data
  total.value = res.data.total
  data.value.forEach(e => {
    e.count = 1;
  });
}

</script>

<style scoped>
.el-col {
  margin-left: 10px;
  margin-top: 10px;
}

.el-pagination {
  margin-top: 50px;
  padding-left: 120px;
}

.context {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 30px;
}
</style>
